<template>
    <div>
      <newheader></newheader>
      <div style="height: 220px;background: #f5f5f6;width: 100%">
        <div style="width: 60%;margin:  0 auto;">
          <el-row>
            <el-col :span="5">
              <h2 style="color: #00ae66;">爱佳租房</h2>
            </el-col>
            <el-col :span="14" style="text-align: center;padding-top: 70px">
              <h1>发布房源</h1>
              <span>给您方便，送他人温暖</span>
            </el-col>
            <el-col :span="5" style="text-align: right">
              <span style="line-height: 70px">竭诚服务</span>
            </el-col>
          </el-row>

        </div>

      </div>
      <el-tabs  v-model="activeTab" @tab-click="tabClick">
        <el-tab-pane label="出租房" name="renthouse">
      <div style="width: 50%;margin:  0 auto;padding-top: 30px">
            <el-row style="padding-top: 20px" :gutter="40">
              <el-col :span="24">
                <el-form label-width="180px" >
                  <el-form-item label="图片">
                    <el-upload
                      action="http://localhost:18080/pic/upload"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-success="handleUploadSuccess"
                      :limit="limitImageCount"
                      :on-exceed="handleExceed"
                      :file-list="fileList"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                  </el-form-item>
                     <!-- <el-form-item label="房屋属性">
                    
                 <el-radio-group v-model="pojo.resourceType">
                 
                    <el-radio :label=2>二手房</el-radio>
                     <el-radio :label=3>出租房</el-radio>
                  </el-radio-group>
            
                  </el-form-item> -->
                  <el-form-item label="房源所在省份">
                    <v-distpicker province="浙江省" city="温州市" area="鹿城区" @selected="onSelected"></v-distpicker>

                  </el-form-item>
                  <el-form-item label="详细地址">
                    <el-input v-model="pojo.address"></el-input>
                  </el-form-item>
                  <el-form-item label="租房方式">
                    
                 <el-radio-group v-model="pojo.rentMethod">
                    <el-radio :label=1>整租</el-radio>
                    <el-radio :label=2>合租</el-radio>
                 
                  </el-radio-group>
                    <!-- <el-input v-model="pojo.rentMethod"></el-input> -->
                  </el-form-item>
                  <el-form-item label="租金（元/月）">
                    <el-input v-model="pojo.rent"></el-input>
                  </el-form-item>
                  <el-form-item label="意向金">
                    <el-input v-model="pojo.intentions"></el-input>
                  </el-form-item>
                  <el-form-item label="支付方式">
                  <el-radio-group v-model="pojo.paymentMethod">
                    <el-radio :label=1>付一押三</el-radio>
                    <el-radio :label=2>付三押一</el-radio>
                    <el-radio :label=3>付六押一</el-radio>
                    <el-radio :label=4>年付押一</el-radio>
                    <el-radio :label=5>其他</el-radio>
                  </el-radio-group>
                  </el-form-item>
                  <el-form-item label="物业费(元/月)">
                    <el-input v-model="pojo.propertyCost"></el-input>
                  </el-form-item>
                  <el-form-item label="房屋朝向">
                    <el-input v-model="pojo.orientation"></el-input>
                  </el-form-item>
                  <el-form-item label="房屋类型">
                    <el-input v-model="pojo.houseType"></el-input>
                  </el-form-item>
                  <el-form-item label="委托人">
                    <el-input v-model="pojo.contact"></el-input>
                  </el-form-item>
                  <el-form-item label="联系方式">
                    <el-input v-model="pojo.mobile"></el-input>
                  </el-form-item>
                   <el-form-item label="可看房时间段">
                    
                 <el-radio-group v-model="pojo.time">
                    <el-radio :label=1>上午</el-radio>
                    <el-radio :label=2>下午</el-radio>
                     <el-radio :label=3>全天</el-radio>
                  </el-radio-group>
                    <!-- <el-input v-model="pojo.rentMethod"></el-input> -->
                  </el-form-item>
                  <!-- <el-form-item label="房屋面积">
                    <el-input v-model="pojo.coveredArea"></el-input>
                  </el-form-item> -->
                  <el-form-item label="可使用面积">
                    <el-input v-model="pojo.useArea"></el-input>
                  </el-form-item>
                  <el-form-item label="房屋所在楼层">
                    <el-input v-model="pojo.floor" placeholder="格式：所在楼层/总楼层"></el-input>
                  </el-form-item>
                  <el-form-item label="门牌号">
                    <el-input v-model=" pojo.buildingFloorNum"></el-input>
                  </el-form-item>
                  <el-form-item label="配套设施">
                     
                    <el-checkbox label="电梯"  v-model="pojo1.elevator" true-label="1" false-label="0"></el-checkbox>
                    <el-checkbox label="车位"  v-model="pojo1.carport" true-label="2" false-label="0"></el-checkbox>
                    <el-checkbox label="用水"  v-model="pojo1.water" true-label="3" false-label="0"></el-checkbox>
                    <el-checkbox label="用电"  v-model="pojo1.electricity" true-label="4" false-label="0"></el-checkbox>
                    <el-checkbox label="燃气"  v-model="pojo1.gas" true-label="5" false-label="0"></el-checkbox>
                    <el-checkbox label="取暖"  v-model="pojo1.heater" true-label="6" false-label="0"></el-checkbox>
                    <el-checkbox label="宽带"  v-model="pojo1.wifi" true-label="7" false-label="0"></el-checkbox>
                    
                  </el-form-item>
                  <el-form-item label="描述">
                    <el-input v-model="pojo.houseDesc" type="textarea" :rows="7"></el-input>
                  </el-form-item>
                  <el-form-item label="房源标题">
                    <el-input v-model="pojo.title"></el-input>
                  </el-form-item>

                </el-form>
              </el-col>
            </el-row>
            <el-row style="text-align: center;margin-bottom: 50px">
              <el-button type="success" @click="handleSave" class="cbtn-bg">提交委托</el-button>
            </el-row>

      </div>
      
        </el-tab-pane>
        <el-tab-pane label="新房" name="newhouse">
           <div style="width: 50%;margin:  0 auto;padding-top: 30px">
            <el-row style="padding-top: 20px" :gutter="40">
              <el-col :span="24">
                <el-form label-width="180px" >
                  <el-form-item label="图片">
                    <el-upload
                      action="http://localhost:18080/pic/upload"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-success="handleUploadSuccess"
                      :limit="limitImageCount"
                      :on-exceed="handleExceed"
                      :file-list="fileList"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                  </el-form-item>
                 
                  <el-form-item label="房源所在省份">
                    <v-distpicker province="浙江省" city="温州市" area="鹿城区" @selected="onSelected"></v-distpicker>

                  </el-form-item>
                  <el-form-item label="详细地址">
                    <el-input v-model="pojo.address"></el-input>
                  </el-form-item>
                  <el-form-item label="绿化率">
                    
                 <el-radio-group v-model="pojo.green">
                    <el-radio :label=1>10%以下</el-radio>
                    <el-radio :label=2>10%~30%</el-radio>
                    <el-radio :label=3>30%以上</el-radio>
                  </el-radio-group>
                    <!-- <el-input v-model="pojo.rentMethod"></el-input> -->
                  </el-form-item>
                  <el-form-item label="预售金（万">
                    <el-input v-model="pojo.rent"></el-input>
                  </el-form-item>
                  <el-form-item label="意向金">
                    <el-input v-model="pojo.intentions"></el-input>
                  </el-form-item>
                   <el-form-item label="产权年限">
                    <el-input v-model="pojo.years"></el-input>
                  </el-form-item>
                   
                      <el-form-item label="装修">
                    
                 <el-radio-group v-model="pojo.decoration">
                    <el-radio :label=1>精装</el-radio>
                    <el-radio :label=2>简装</el-radio>
                    <el-radio :label=3>毛胚</el-radio>
                  </el-radio-group>
                    <!-- <el-input v-model="pojo.rentMethod"></el-input> -->
                  </el-form-item>
                  <el-form-item label="房屋朝向">
                    <el-input v-model="pojo.orientation"></el-input>
                  </el-form-item>
                  <el-form-item label="房屋类型">
                    <el-input v-model="pojo.houseType"></el-input>
                  </el-form-item>
                  <el-form-item label="委托人">
                    <el-input v-model="pojo.contact"></el-input>
                  </el-form-item>
                  <el-form-item label="联系方式">
                    <el-input v-model="pojo.mobile"></el-input>
                  </el-form-item>
                   <el-form-item label="可看房时间段">
                    
                 <el-radio-group v-model="pojo.time">
                    <el-radio :label=1>上午</el-radio>
                    <el-radio :label=2>下午</el-radio>
                     <el-radio :label=3>全天</el-radio>
                  </el-radio-group>
                    <!-- <el-input v-model="pojo.rentMethod"></el-input> -->
                  </el-form-item>
                  <el-form-item label="房屋面积">
                    <el-input v-model="pojo.coveredArea"></el-input>
                  </el-form-item>
                  <el-form-item label="可使用面积">
                    <el-input v-model="pojo.useArea"></el-input>
                  </el-form-item>
                  <el-form-item label="房屋所在楼层">
                    <el-input v-model="pojo.floor" placeholder="格式：所在楼层/总楼层"></el-input>
                  </el-form-item>
                  <el-form-item label="门牌号">
                    <el-input v-model=" pojo.buildingFloorNum"></el-input>
                  </el-form-item>
                  <el-form-item label="配套设施">
                     
                    <el-checkbox label="电梯"  v-model="pojo1.elevator" true-label="1" false-label="0"></el-checkbox>
                    <el-checkbox label="车位"  v-model="pojo1.carport" true-label="2" false-label="0"></el-checkbox>
                    <el-checkbox label="用水"  v-model="pojo1.water" true-label="3" false-label="0"></el-checkbox>
                    <el-checkbox label="用电"  v-model="pojo1.electricity" true-label="4" false-label="0"></el-checkbox>
                    <el-checkbox label="燃气"  v-model="pojo1.gas" true-label="5" false-label="0"></el-checkbox>
                    <el-checkbox label="取暖"  v-model="pojo1.heater" true-label="6" false-label="0"></el-checkbox>
                    <el-checkbox label="宽带"  v-model="pojo1.wifi" true-label="7" false-label="0"></el-checkbox>
                    
                  </el-form-item>
                  <el-form-item label="描述">
                    <el-input v-model="pojo.houseDesc" type="textarea" :rows="7"></el-input>
                  </el-form-item>
                  <el-form-item label="房源标题">
                    <el-input v-model="pojo.title"></el-input>
                  </el-form-item>

                </el-form>
              </el-col>
            </el-row>
            <el-row style="text-align: center;margin-bottom: 50px">
              <el-button type="success" @click="handleSave" class="cbtn-bg">提交委托</el-button>
            </el-row>

      </div>
           </el-tab-pane>

             <el-tab-pane label="二手房" name="oldhouse">

                <div style="width: 50%;margin:  0 auto;padding-top: 30px">
            <el-row style="padding-top: 20px" :gutter="40">
              <el-col :span="24">
                <el-form label-width="180px" >
                  <el-form-item label="图片">
                    <el-upload
                      action="http://localhost:18080/pic/upload"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-success="handleUploadSuccess"
                      :limit="limitImageCount"
                      :on-exceed="handleExceed"
                      :file-list="fileList"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                  </el-form-item>
                
                  <el-form-item label="房源所在省份">
                    <v-distpicker province="浙江省" city="温州市" area="鹿城区" @selected="onSelected"></v-distpicker>

                  </el-form-item>
                  <el-form-item label="详细地址">
                    <el-input v-model="pojo.address"></el-input>
                  </el-form-item>
                      <el-form-item label="装修">
                    
                 <el-radio-group v-model="pojo.decoration">
                    <el-radio :label=1>精装</el-radio>
                    <el-radio :label=2>简装</el-radio>
                    <el-radio :label=3>毛胚</el-radio>
                  </el-radio-group>
                    <!-- <el-input v-model="pojo.rentMethod"></el-input> -->
                  </el-form-item>
                  <el-form-item label="使用年限">
                    <el-input v-model="pojo.years"></el-input>
                  </el-form-item>
                  <el-form-item label="售价（万）">
                    <el-input v-model="pojo.rent"></el-input>
                  </el-form-item>
                  <el-form-item label="意向金">
                    <el-input v-model="pojo.intentions"></el-input>
                  </el-form-item>
                
                  <el-form-item label="物业费(元/月)">
                    <el-input v-model="pojo.propertyCost"></el-input>
                  </el-form-item>
                  <el-form-item label="房屋朝向">
                    <el-input v-model="pojo.orientation"></el-input>
                  </el-form-item>
                  <el-form-item label="房屋类型">
                    <el-input v-model="pojo.houseType"></el-input>
                  </el-form-item>
                  <el-form-item label="委托人">
                    <el-input v-model="pojo.contact"></el-input>
                  </el-form-item>
                  <el-form-item label="联系方式">
                    <el-input v-model="pojo.mobile"></el-input>
                  </el-form-item>
                   <el-form-item label="可看房时间段">
                    
                 <el-radio-group v-model="pojo.time">
                    <el-radio :label=1>上午</el-radio>
                    <el-radio :label=2>下午</el-radio>
                     <el-radio :label=3>全天</el-radio>
                  </el-radio-group>
                    <!-- <el-input v-model="pojo.rentMethod"></el-input> -->
                  </el-form-item>
                  <el-form-item label="房屋面积">
                    <el-input v-model="pojo.coveredArea"></el-input>
                  </el-form-item>
                  <el-form-item label="可使用面积">
                    <el-input v-model="pojo.useArea"></el-input>
                  </el-form-item>
                  <el-form-item label="房屋所在楼层">
                    <el-input v-model="pojo.floor" placeholder="格式：所在楼层/总楼层"></el-input>
                  </el-form-item>
                  <el-form-item label="门牌号">
                    <el-input v-model=" pojo.buildingFloorNum"></el-input>
                  </el-form-item>
                  <el-form-item label="配套设施">
                     
                    <el-checkbox label="电梯"  v-model="pojo1.elevator" true-label="1" false-label="0"></el-checkbox>
                    <el-checkbox label="车位"  v-model="pojo1.carport" true-label="2" false-label="0"></el-checkbox>
                    <el-checkbox label="用水"  v-model="pojo1.water" true-label="3" false-label="0"></el-checkbox>
                    <el-checkbox label="用电"  v-model="pojo1.electricity" true-label="4" false-label="0"></el-checkbox>
                    <el-checkbox label="燃气"  v-model="pojo1.gas" true-label="5" false-label="0"></el-checkbox>
                    <el-checkbox label="取暖"  v-model="pojo1.heater" true-label="6" false-label="0"></el-checkbox>
                    <el-checkbox label="宽带"  v-model="pojo1.wifi" true-label="7" false-label="0"></el-checkbox>
                    
                  </el-form-item>
                  <el-form-item label="描述">
                    <el-input v-model="pojo.houseDesc" type="textarea" :rows="7"></el-input>
                  </el-form-item>
                  <el-form-item label="房源标题">
                    <el-input v-model="pojo.title"></el-input>
                  </el-form-item>

                </el-form>
              </el-col>
            </el-row>
            <el-row style="text-align: center;margin-bottom: 50px">
              <el-button type="success" @click="handleSave" class="cbtn-bg">提交委托</el-button>
            </el-row>

      </div>

           </el-tab-pane>
         </el-tabs>
      <cfooter></cfooter>
    </div>
</template>

<script>
    import newheader from "@/components/newheader";
    import cfooter from "@/components/cfooter";
    import resourceApi from "@/api/resource";
    export default {
        name: "index",
        components :{
            newheader,
            cfooter
        },
        data() {
            return{
              activeTab:'renthouse',
                  name: '',
                  region: '',
                  date1: '',
                  date2: '',
                  delivery: false,
                  type: [],
                  resource: '',
                  desc: '',
                  code:'',
                  pojo1:{},//设施绑定
                  pojo: {pic : '',
                        facilities: '',
                        province: '浙江省',
                        city:'温州市',
                        county:'鹿城区',
                        resourceType:3
                          }, // 编辑表单绑定的实体对象
                  cityList: [], // 城市列表
                  dialogImageUrl: '',
                  dialogVisible: false,
                  uploadPicture: [],
                  fileList:[],
                  limitImageCount:6,
                  id: '' // 当前用户编辑的ID
              }

        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            tabClick(tab, event){
                // console.log(tab);
                // console.log(tab.name);
                if(tab.name=='renthouse'){
                  this.pojo.resourceType=3;
                
                }else if(tab.name=='oldhouse'){
                  this.pojo.resourceType=2;
                }else{
                  this.pojo.resourceType=1;
                }
                // console.log(this.pojo.resourceType);
            }
            ,
            handleSave() {
              this.pojo.facilities='';
              if(this.pojo1.elevator=='1'){

                this.pojo.facilities=this.pojo.facilities+','+this.pojo1.elevator
                console.log(this.pojo.facilities)
              }
              if(this.pojo1.carport=='2'){

                this.pojo.facilities=this.pojo.facilities+','+this.pojo1.carport
              }

              if(this.pojo1.water=='3'){

                this.pojo.facilities=this.pojo.facilities+','+this.pojo1.water
              }
              if(this.pojo1.electricity=='4'){

                this.pojo.facilities=this.pojo.facilities+','+this.pojo1.electricity
              }

              if(this.pojo1.gas=='5'){

                this.pojo.facilities=this.pojo.facilities+','+this.pojo1.gas
              }
              if(this.pojo1.heater=='6'){

                this.pojo.facilities=this.pojo.facilities+','+this.pojo1.heater
              }
              if(this.pojo1.wifi=='7'){

                this.pojo.facilities=this.pojo.facilities+','+this.pojo1.wifi
              }

              this.pojo.facilities= this.pojo.facilities.slice(1);

              

              console.log(this.pojo)
                // if (this.pojo.id != null) {

                //     for (var i = 0; i < this.uploadPicture.length; i++) {
                //         this.pojo.image.push(this.uploadPicture[i]);
                //     }
                // } else {
                //     this.pojo.image = [];
                //     for (var i = 0; i < this.uploadPicture.length; i++) {
                //         this.pojo.image.push(this.uploadPicture[i]);
                //     }
                // }
                // var im = JSON.stringify(this.pojo.image);
                // this.pojo.image = im
                resourceApi.save(this.pojo).then(response => {
                  console.log("发送")
                    // this.$message({
                    //     message: response.message,
                    //     type: (response.flag ? 'success' : 'error')
                    // })
                    // if (response.flag) { // 如果成功
                    //     this.fetchData() // 刷新列表
                    //     this.fileList = [];
                    // }
                    if(this.pojo.resourceType==1){
                      this.$router.push({path:'/newHouse/indedx'})
                    }
                    else if(this.pojo.resourceType==2){
                      this.$router.push({path:'/oldHouse/indedx'})
                    }else{

                      this.$router.push({path:'/rentHouse/indedx'})
                    }
                    console.log(response);
                })
                this.dialogFormVisible = false // 关闭窗口
            },
            handleRemove(file, fileList) {
                // console.log(file.response.name, fileList);
               let image= this.pojo.pic.split(",");
               this.pojo.pic=''
              //  console.log(image);
               image.forEach(pic => {
                 if(pic!=file.response.name){
                     this.pojo.pic=this.pojo.pic+","+pic;
                 }
               });
               this.pojo.pic=this.pojo.pic.slice(1);
              //  console.log(this.pojo.pic);

            },
            
            handlePictureCardPreview(file) {

                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleUploadSuccess(response) {
                
                console.log(response.name);
                
                if(this.pojo.pic==''){
                  this.pojo.pic=response.name;
                }else{
                  this.pojo.pic=this.pojo.pic+","+response.name;
                }
                console.log(this.pojo.pic)
                
                // var total = 0;
                // console.log(this.pojo)
                // if (this.pojo.image != null ) {
                //     total =  fileList.length+this.pojo.image.length;

                // }else{
                //     total = fileList.length;
                // }

                // if (total>6) {
                //     this.$alert('房源描述最多6张图片', '提示', {
                //         confirmButtonText: '确定',
                //         callback: action => {
                //             this.$message({
                //                 type: 'info',
                //                 message: `action: ${action}`
                //             });
                //         }
                //     });
                // }else{
                //     console.log("---------------")
                //     console.log(fileList)
                //     this.uploadPicture = [];
                //     for (var i = 0; i < fileList.length; i++) {
                //         console.log(fileList.length)
                //         this.uploadPicture.push("https://1321654.oss-cn-beijing.aliyuncs.com/"+fileList[i].response.src);
                //     }
                // }
            },
            handleExceed(file, fileList) {

                this.$alert('房源描述最多6张图片', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `action: ${action}`
                        });
                    }
                });
            },

            deleteImage(src, index) {
                var picture = this.pojo.image;
                console.log(src + "   " + index)
                this.$confirm('确定要删除此图片吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    picture.splice(index,1);
                })
                this.pojo.image = picture;
            },
            handleChange(value) {
                console.log(value);
            },
            onSelected(data) {
                this.pojo.province = data.province.value
                this.pojo.city = data.city.value
                this.pojo.county = data.area.value
                // console.log(this.pojo.province)
            },
        }
    }
</script>

<style scoped>
  .el-form-item__label{
    color: #000000;
  }
  .crow{
    line-height: 30px;
  }
  .cbtn-bg{
    width: 200px;
    height: 50px;
    font-size: 18px;
    background: #00ae66;
    border: none;
    border-radius: 0px
  }
</style>
